<template>
  <div class="img-preview">
    <div class="img-left">
      <div
        class="left-top"
        @mouseenter="show = true"
        @mouseleave="show = false"
      >
        <div
          class="img"
          :style="{
            backgroundImage: 'url(' + realSrc + ')',
            backgroundSize: 'contain',
          }"
        >
          <!-- <img :src="realSrc" alt=""> -->
        </div>
        <span class="left" v-show="show" @click="changeId('int')"> &lt; </span>
        <span class="right" v-show="show" @click="changeId('add')">&gt;</span>
      </div>
      <div class="left-bottom">
        <ul class="list-ul">
          <li
            class="tb-s50"
            :class="[activeId == k ? 'active' : null]"
            v-for="(item, k) in thumbnailImgList"
            :key="k"
            @mouseenter="activeId = k"
          >
            <!-- <div class="img " :style="{ backgroundImage : 'url(' + item + ')' , backgroundSize:'contain' }"> -->
            <div
              class="img"
              :style="{
                backgroundImage: 'url(' + item + ')',
                backgroundSize: 'contain',
              }"
            ></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="img-right">
      <div class="right-top">
        <div class="right-title">
          <p v-for="(item, k) in top.lebel" :key="k">
            <span class="label">{{ item.label }}：</span>
            <span class="value">{{ imgDetail[item.value] }}</span>
          </p>
        </div>
        <div class="right-content">
          <p v-for="(item, k) in top.value" :key="k">
            <span class="label">{{ item.label }}：</span>
            <span class="value">{{ imgDetail[item.value] }}</span>
            <span class="unit">{{ item.unit }}</span>
          </p>
          <p>
            <span class="label">授权供应商：</span>
            <span class="value">{{
              imgDetail.designSupplier == 1 ? "是" : "否"
            }}</span>
          </p>
          <p>
            <span class="label">审核状态：</span>
            <span class="value">
              <DictTag
                :options="identityAuditStatusOptions"
                :value="imgDetail.status"
                style="display: inline"
              />
            </span>
          </p>
        </div>
      </div>

      <div class="right-bottom">
        <div class="right-title">审核记录日志：</div>
        <div class="right-content" v-if="firstShenheHistoryList.length > 0">
          <el-timeline>
            <el-timeline-item
              v-for="item in firstShenheHistoryList"
              :key="item.id"
              :timestamp="item.auditTime"
              placement="top"
            >
              <h4>
                用户[<font color="red">{{ item.auditUser }}</font> ]
                =>执行操作<font color="red"
                  >{{ item.info
                  }}{{
                    selectDictLabel(identityAuditStatusOptions, item.status)
                  }}</font
                >
              </h4>
              <p>
                审核意见 <font color="red">{{ item.opinion || "无" }}</font>
              </p>
            </el-timeline-item>
            <font color="red" v-if="firstShenheHistoryList.length == 0">
              此标识没有相关记录！
            </font>
          </el-timeline>
        </div>

        <font color="red" v-else> 此标识没有相关记录！ </font>
        <el-button
          type="primary"
          @click="open = true"
          v-if="firstShenheHistoryList.length > 0"
          >查看全部</el-button
        >
      </div>
    </div>

    <el-dialog
      v-dialogDrag
      title="审核记录日志"
      :visible.sync="open"
      width="30%"
      append-to-body
      custom-class="shenhelist_dioalog"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(item, k) in shenheHistoryList"
          :key="item.auditId"
          :timestamp="`${k + 1}. ${item.auditTime}`"
          placement="top"
        >
          <h4>
            用户[<font color="red">{{ item.auditUser }}</font> ] =>执行操作<font
              color="red"
              >{{ item.info
              }}{{
                selectDictLabel(identityAuditStatusOptions, item.status)
              }}</font
            >
          </h4>
          <p>
            审核意见 <font color="red">{{ item.opinion || "无" }}</font>
          </p>
        </el-timeline-item>
        <font color="red" v-if="shenheHistoryList.length == 0">
          此标识没有相关记录！
        </font>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { isExternal } from "@/utils/validate";

export default {
  name: "ImagePreview",
  props: {
    imgDetail: {
      type: Object,
      default: {},
    },
    thumbnailImgList: {
      type: Array,
      default: [],
    },
    shenheHistoryList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      open: false,
      activeId: 0,
      show: false,
      identityStatusOptions: [],
      // 标识信息中 审核日志状态
      identityAuditStatusOptions: [],
      top: {
        lebel: [{ label: "标识位置", value: "location" }],
        value: [
          // { label: "类别", value: "classifyName" },
          // { label: "名称", value: "name" },
          { label: "标识编号", value: "identifyCode" },
          { label: "一级类别", value: "appliedRangeName" },
          { label: "二级类别", value: "classifyName" },
          { label: "三级类别", value: "name" },
          { label: "标识数量", value: "num" },
          { label: "制作费用", value: "cost", unit: "元" },
          { label: "设计制作供应商", value: "company" },
          { label: "制作日期", value: "productTime" },
          { label: "管理人员", value: "manager" },
          { label: "上传时间", value: "createTime" },
          { label: "录入人员", value: "createBy" },
          { label: "标识应用说明", value: "remark" },
        ],
      },
    };
  },
  computed: {
    // imgDetail2() {
    //   console.log("this.imgDetail;: ", this.imgDetail);
    //   return this.imgDetail;
    // },
    realSrc() {
      let real_src = this.thumbnailImgList[this.activeId];
      if (isExternal(real_src)) {
        return real_src;
      }
      return real_src;
    },

    firstShenheHistoryList() {
      return this.shenheHistoryList.length > 0
        ? [this.shenheHistoryList[0]]
        : [];
    },
  },
  created() {
    this.getDicts("iden_status").then((response) => {
      this.identityStatusOptions = response.data;
    });
    this.getDicts("iden_audit_status").then((response) => {
      this.identityAuditStatusOptions = response.data;
    });
  },
  methods: {
    changeId(type) {
      if (type == "add") {
        if (this.activeId >= this.thumbnailImgList.length - 1) return;

        this.activeId++;
      } else {
        if (this.activeId == 0) return;
        this.activeId--;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.img-preview {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  .img-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    border: 1px solid #ccc;
    width: 0;
    .left-top {
      width: 100%;
      height: 450px;
      display: flex;
      position: relative;
      margin: 0 0 4px 0;
      border-bottom: 1px solid #ccc;
      .img {
        flex: 1;
        background-repeat: no-repeat;
        text-align: center;
        background-position: center;
      }
      .left {
        display: inline-block;
        background: #ccc;
        width: 30px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 26px;
        opacity: 0.7;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      .right {
        display: inline-block;
        background: #ccc;
        width: 30px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 26px;
        opacity: 0.7;
        position: absolute;
        cursor: pointer;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
    .left-bottom {
      // width: 100%;
      // height: 150px;
      flex: 1;
      overflow: auto;
      .list-ul {
        // height: 150px;
        // width: 100%;
        display: flex;
        flex-direction: row;
        .tb-s50.active {
          box-sizing: content-box;
          border: 2px solid #f40;
        }
        .tb-s50 {
          height: 150px;
          width: 200px;
          display: flex;
          border: 1px dashed #ccc;
          margin: 0 4px;
          .img {
            flex: 1;
            height: 150px;
            width: 200px;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
      }
    }
  }
  .img-right {
    width: 350px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    .right-title {
      // height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      background-color: #256459;
    }
    .right-top {
      // min-height: 360px;
      flex: 1;
      padding: 0 6px 6px;
      .right-title p {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .label {
          width: 30%;
        }
        .value {
          text-align: left;
          flex: 1;
        }
      }
    }
    .right-bottom {
      // flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;

      height: 200px;

      .right-content {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        padding: 10px;
        .el-timeline {
          flex: 1;
        }
      }
    }

    .right-content {
      font-size: 14px;
      line-height: 32px;

      p {
        margin: 0;
        padding: 0;
        height: 26px;
        line-height: 26px;
      }
    }
  }
}
</style>

<style lang="scss">
.shenhelist_dioalog {
  .el-dialog__body {
    max-height: 70vh;
    overflow: auto;
  }
}
</style>
